<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="icon" sizes="32x32" href="http://pureut.com/img/favicon-32x32.png" />
    <link rel="stylesheet" type="text/css" media="print" href="./public/print-lock.css" />
    <title>pureut</title>
    <!--[if lt IE 11
      ]><script>
        window.location.href = '/html/ie.html'
      </script><!
    [endif]-->

    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .chromeframe {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
      }

      .logo {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 500px;
        height: 120px;
      }

      #loader-wrapper {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        background: linear-gradient(to right, #337ecc, #409eff, #a0cfff);
      }

      @keyframes loader-title {
        0% {
          margin-left: 0px;
        }
        50% {
          margin-left: 10px;
        }
        75% {
        }
        100% {
          margin-left: 0px;
        }
      }

      .load_title {
        color: #fff;
        font-size: 50px;
        margin-left: 40px;
      }

      .rotate {
        transform: rotate(260deg);
      }

      .my-words {
        letter-spacing: 1px;
        margin: 150px auto;
        text-align: center;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 7rem;
        color: #ff9c55;
      }

      .my-words .title-tiao:nth-child(2n) {
        color: #f47aff;
      }

      .my-words .title-tiao:nth-child(3n) {
        color: #ffd913;
      }

      .my-words .title-tiao:nth-child(5n) {
        color: #ce0610;
      }

      .my-words .title-tiao:nth-child(7n),
      .my-words .title-tiao:nth-child(12n) {
        color: #ff5555;
      }

      .title-tiao {
        position: relative;
        font-size: 20px;
      }

      .title-tiao:nth-child(7) {
        animation: title-tiao 1s linear infinite;
      }

      @keyframes title-tiao {
        0% {
          top: 0px;
        }
        50% {
          top: -50px;
        }
        100% {
          top: 0;
        }
      }

      .loading-next {
        margin-top: -300px;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, #23272e, #0a7ae2, #23272e);
      }

      .loading-next .loading-next-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .loading-next .loading-next-box-warp {
        width: 100px;
        height: 100px;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item {
        width: 33.333333%;
        height: 33.333333%;
        /* background: #0cf493; */
        float: left;
        animation: loading-next-animation 1.2s infinite ease;
        border-radius: 1px;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
        animation-delay: 0s;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
        animation-delay: 0.1s;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
        animation-delay: 0.2s;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
        animation-delay: 0.3s;
      }

      .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
        animation-delay: 0.4s;
      }

      .loading-next-box-item:nth-child(1) {
        background-color: #529b2e;
      }

      .loading-next-box-item:nth-child(2) {
        background-color: #95d475;
      }

      .loading-next-box-item:nth-child(3) {
        background-color: #e1f3d8;
      }

      .loading-next-box-item:nth-child(4) {
        background-color: #b88230;
      }

      .loading-next-box-item:nth-child(5) {
        background-color: #eebe77;
      }

      .loading-next-box-item:nth-child(6) {
        background-color: #f8e3c5;
      }

      .loading-next-box-item:nth-child(7) {
        background-color: #c45656;
      }

      .loading-next-box-item:nth-child(8) {
        background-color: #f89898;
      }

      .loading-next-box-item:nth-child(9) {
        background-color: #fcd3d3;
      }

      @keyframes loading-next-animation {
        0%,
        70%,
        100% {
          transform: scale3D(1, 1, 1);
        }
        35% {
          transform: scale3D(0, 0, 1);
        }
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div id="loader-wrapper">
        <div class="my-words">
          <img class="logo" src="./src/assets/logo/logo-03.png" alt="" />
          <span class="title-tiao">P</span>
          <span class="title-tiao">U</span>
          <span class="title-tiao">R</span>
          <span class="title-tiao">E</span>
          <span class="title-tiao">U</span>
          <span class="title-tiao rotate">T</span>
          <div class="loading-next">
            <div class="loading-next-box">
              <div class="loading-next-box-warp">
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
                <div class="loading-next-box-item"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.js"></script>
    <!-- PageSpy SDK
    <script crossorigin="anonymous" src="http://192.168.0.40:6752/page-spy/index.min.js"></script>

    <script crossorigin="anonymous" src="http://192.168.0.40:6752/plugin/data-harbor/index.min.js"></script>
    <script crossorigin="anonymous" src="http://192.168.0.40:6752/plugin/rrweb/index.min.js"></script>
    <script>
      window.$harbor = new DataHarborPlugin()
      window.$rrweb = new RRWebPlugin()
      ;[window.$harbor, window.$rrweb].forEach(p => {
        PageSpy.registerPlugin(p)
      })

      window.$pageSpy = new PageSpy()
    </script> -->
  </body>
</html>
